<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>新增表格</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="_csrf" content="${_csrf.token}"/>
    <meta name="_csrf_header" content="${_csrf.headerName}"/>
    <link rel="icon" type="image/x-icon" href="${pageContext.request.contextPath}/favicon.ico">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/back/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/back/css/font.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/back/css/xadmin.css">
    <style>
        .x-red {
            position: absolute;
            left: 6px;
            top: 2px;
            margin-right: 2px;
            color: red;
            float: left;
            z-index: 1;
        }

        .xm-select-parent .xm-form-select dd {
            margin-left: 15px;
        }

        .my-notes {
            position: relative;
        }

        .my-notes .content {
            padding-left: 100px;
            height: 24px;
            border: 1px solid #FFF;
            border-top: 0;
        }

        .my-notes .my-notes-show {
            width: 100%;
            z-index: 9990;
            position: absolute;
            top: 0;
            background: #FFF;
        }

        .my-notes .my-notes-show > div {
            padding-left: 100px;
            border: 1px solid #e6e6e6;
            border-top: 0;
        }

        .ace_editor .ace_line span, .ace_editor .ace_line {
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
        }
    </style>
</head>

<body>
<div class="x-body">
    <form class="layui-form layui-form-pane" lay-filter="form-sms" onsubmit="return false;">
        <input type="hidden" name="pageId" value="${pageId}">
        <input type="hidden" name="id" value="${CTables.id}">
        <div class="layui-form-item">
            <label for="T_title" class="layui-form-label"><span class="x-red">*</span>标题</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" id="T_title" name="title" lay-verify="required"
                       placeholder="标题" autocomplete="off" value="${CTables.title}">
            </div>
            <div class="my-notes">
                <div class="layui-elip layui-text content">
                    用于导出或者提示
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15 layui-form-item">
            <div class="layui-col-sm6">
                <label for="T_toolbar" class="layui-form-label">工具栏</label>
                <div class="layui-input-block">
                    <input type="text" id="T_toolbar" name="toolbar" autocomplete="off" class="layui-input"
                           placeholder="#sys_toolbarDemo" value="${CTables.toolbar}">
                </div>
                <div class="my-notes">
                    <div class="layui-elip layui-text content">
                        #toolbarDemo: 指向自定义工具栏模板选择器<br>
                        &lt;div&gt;xxx&lt;/div&gt; : 直接传入工具栏模板字符<br>
                        true : 仅开启工具栏，不显示左侧模板<br>
                        default : 让工具栏左侧显示默认的内置模板
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6">
                <label for="B_defaultToolbar" class="layui-form-label">工具栏右侧</label>
                <div class="layui-input-block">
                    <input type="text" id="B_defaultToolbar" name="defaultToolbar" autocomplete="off"
                           class="layui-input" placeholder='["filter", "print", "exports"]'
                           value='${CTables.defaultToolbar}'>
                </div>
                <div class="my-notes">
                    <div class="layui-elip layui-text content">
                        filter: 显示筛选图标 exports: 显示导出图标 print: 显示打印图标
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15 layui-form-item">
            <div class="layui-col-sm4">
                <label for="T_width" class="layui-form-label">宽度</label>
                <div class="layui-input-block">
                    <input type="number" id="T_width" name="width" autocomplete="off" class="layui-input"
                           placeholder="默认铺满" value="${CTables.width}">
                </div>
            </div>
            <div class="layui-col-sm4">
                <label for="B_height" class="layui-form-label">高度</label>
                <div class="layui-input-block">
                    <input type="text" id="B_height" name="height" autocomplete="off" class="layui-input"
                           placeholder="默认随数据列表而适应" value="${CTables.height}">
                </div>
                <div class="my-notes">
                    <div class="layui-elip layui-text content">
                        不填写/固定值/full-差值
                    </div>
                </div>
            </div>
            <div class="layui-col-sm4">
                <label for="B_cellMinWidth" class="layui-form-label">列最小宽度</label>
                <div class="layui-input-block">
                    <input type="number" id="B_cellMinWidth" name="cellMinWidth" autocomplete="off" class="layui-input"
                           placeholder="60" value="${CTables.cellMinWidth}">
                </div>
                <div class="my-notes">
                    <div class="layui-elip layui-text content">
                        全局定义所有常规单元格的最小宽度（默认：60）
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15 layui-form-item">
            <div class="layui-col-sm4">
                <label for="T_page" class="layui-form-label">分页</label>
                <div class="layui-input-block">
                    <select name="page" id="T_page" lay-verify="">
                        <c:if test="${CTables.page=='false'}">
                            <option value="false" selected>关闭</option>
                            <option value="true">开启</option>
                        </c:if>
                        <c:if test="${CTables.page=='true'||CTables.page==''||CTables.page==null}">
                            <option value="false">关闭</option>
                            <option value="true" selected>开启</option>
                        </c:if>
                    </select>
                </div>
            </div>
            <div class="layui-col-sm3">
                <label for="B_limit" class="layui-form-label">每页条数</label>
                <div class="layui-input-block">
                    <input type="number" id="B_limit" name="limit" autocomplete="off" class="layui-input"
                           placeholder="10" value="${CTables.limit}">
                </div>
            </div>
            <div class="layui-col-sm5">
                <label for="B_limits" class="layui-form-label">条数选择项</label>
                <div class="layui-input-block">
                    <input type="text" id="B_limits" name="limits" autocomplete="off" class="layui-input"
                           placeholder="[10,20,30,40]" value="${CTables.limits}">
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15 layui-form-item">
            <div class="layui-col-sm4">
                <label for="T_totalRow" class="layui-form-label">合计行</label>
                <div class="layui-input-block">
                    <select name="totalRow" id="T_totalRow" lay-verify="">
                        <c:if test="${CTables.totalRow=='false'||CTables.totalRow==''||CTables.totalRow==null}">
                            <option value="false" selected>关闭</option>
                            <option value="true">开启</option>
                        </c:if>
                        <c:if test="${CTables.totalRow=='true'}">
                            <option value="false">关闭</option>
                            <option value="true" selected>开启</option>
                        </c:if>
                    </select>
                </div>
            </div>
            <div class="layui-col-sm4">
                <label for="T_autoSort" class="layui-form-label">服务器排序</label>
                <div class="layui-input-block">
                    <select name="autoSort" id="T_autoSort" lay-verify="">
                        <c:if test="${CTables.autoSort=='true'||CTables.autoSort==''}">
                            <option value="true" selected>关闭</option>
                            <option value="false">开启</option>
                        </c:if>
                        <c:if test="${CTables.autoSort==null||CTables.autoSort=='false'}">
                            <option value="true">关闭</option>
                            <option value="false" selected>开启</option>
                        </c:if>
                    </select>
                </div>
            </div>
            <%--<div class="layui-col-sm2">--%>
            <%--<label for="B_limit" class="layui-form-label">每页条数</label>--%>
            <%--<div class="layui-input-block">--%>
            <%--<input type="number" id="B_limit" name="limit" required lay-verify="required"--%>
            <%--autocomplete="off" class="layui-input" placeholder="10">--%>
            <%--</div>--%>
            <%--</div>--%>
            <%--<div class="layui-col-sm5">--%>
            <%--<label for="B_limits" class="layui-form-label">条数选择项</label>--%>
            <%--<div class="layui-input-block">--%>
            <%--<input type="text" id="B_limits" name="limits" required lay-verify="required"--%>
            <%--autocomplete="off" class="layui-input" placeholder="[20,30,40]">--%>
            <%--</div>--%>
            <%--</div>--%>
        </div>
        <div class="layui-row layui-col-space15 layui-form-item">
            <div class="layui-col-sm4">
                <label for="T_skin" class="layui-form-label">外观</label>
                <div class="layui-input-block">
                    <input type="text" id="T_skin" name="skin" autocomplete="off" class="layui-input" placeholder=""
                           value="${CTables.skin}">
                </div>
                <div class="my-notes">
                    <div class="layui-elip layui-text content">
                        line （行边框风格） row （列边框风格） nob （无边框风格）
                    </div>
                </div>
            </div>
            <div class="layui-col-sm3">
                <label for="B_even" class="layui-form-label">隔行背景</label>
                <div class="layui-input-block">
                    <select name="even" id="B_even" lay-verify="">
                        <c:if test="${CTables.even=='false'||CTables.even==''||CTables.even==null}">
                            <option value="false" selected>关闭</option>
                            <option value="true">开启</option>
                        </c:if>
                        <c:if test="${CTables.even=='true'}">
                            <option value="false">关闭</option>
                            <option value="true" selected>开启</option>
                        </c:if>
                    </select>
                </div>
            </div>
            <div class="layui-col-sm5">
                <label for="B_disSize" class="layui-form-label">表格尺寸</label>
                <div class="layui-input-block">
                    <select name="disSize" id="B_disSize" lay-verify="">
                        <c:if test="${CTables.disSize==''||CTables.disSize==null}">
                            <option value="" selected>默认</option>
                            <option value="sm">小尺寸</option>
                            <option value="lg">大尺寸</option>
                        </c:if>
                        <c:if test="${CTables.disSize=='sm'}">
                            <option value="">默认</option>
                            <option value="sm">小尺寸</option>
                            <option value="lg" selected>大尺寸</option>
                        </c:if>
                        <c:if test="${CTables.disSize=='lg'}">
                            <option value="">默认</option>
                            <option value="sm">小尺寸</option>
                            <option value="lg" selected>大尺寸</option>
                        </c:if>
                    </select>
                </div>
                <div class="my-notes">
                    <div class="layui-elip layui-text content">
                        sm （小尺寸） lg （大尺寸）
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label for="T_done" class="layui-form-label">渲染回调
                <small>&nbsp; function(res, curr, count) res：接口数据；curr：当前页面；count：数据总和</small>
            </label>
            <div class="layui-input-block">
                <pre style="height: 100px;width: 100%" id="T_done">${CTables.done}</pre>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label for="T_rawdml" class="layui-form-label"><span class="x-red">*</span>数据语句</label>
            <div class="layui-input-block">
                <pre style="height: 100px;width: 100%" id="T_rawdml">${CTables.rawdml}</pre>
            </div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn" style="float: right" id="my-submit" lay-filter="submit" lay-submit>保存信息</button>
        </div>
    </form>

</div>

<script type="text/javascript" src="${pageContext.request.contextPath }/back/lib/layui/layui.js"
        charset="utf-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/back/js/xadmin.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/httptTools.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/back/lib/ace_editor/ace.js?v=1"></script>
<script type="text/javascript"
        src="${pageContext.request.contextPath }/back/lib/ace_editor/ext-language_tools.js"></script>
<%--<script type="text/javascript" src="${pageContext.request.contextPath }/back/lib/ace_editor/theme-monokai.js"></script>--%>

<jsp:include page="/WEB-INF/page/layui_version.jsp"></jsp:include>

<script>

    // trigger extension
    ace.require("ace/ext/language_tools");
    var editor_done = ace.edit("T_done");
    editor_done.session.setMode("ace/mode/javascript");
    editor_done.setTheme("ace/theme/katzenmilch");
    // clouds  crimson_editor idle_fingers  katzenmilch
    editor_done.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true
    });

    var editor_rawdml = ace.edit("T_rawdml");
    editor_rawdml.session.setMode("ace/mode/sql");
    editor_rawdml.setTheme("ace/theme/katzenmilch");
    editor_rawdml.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true
    });
    // editor_rawdml.getValue();
    $('body').on('mouseover', '.my-notes .content', function (event) {
        $('.my-notes .my-notes-show').each(function (i, e) {
            $(this).remove();
        });
        $(this).closest('.my-notes').append($('<div class="my-notes-show"></div>').append($('<div class="layui-text"><div>').html($(this).html())));
        //鼠标悬浮
    });
    $('body').on('mouseout', '.my-notes-show', function (event) {
        //鼠标离开
        $(this).remove();
    });
    layui.use(['form', 'layer', 'lutil'], function () {
        var form = layui.form,
            lutil = layui.lutil,
            layer = layui.layer;
        form.on('submit(submit)', function (formData) {
            var rawdml = editor_rawdml.getValue(), done = editor_done.getValue();
            if (!rawdml || rawdml == '' || $.trim(rawdml) == '') {
                lutil.error_alert("数据语句不能为空！！");
                return false;
            }
            var loding = layer.load(2, {shade: [0.3, '#eee']});
            ajaxRequestByCsrf('${pageContext.request.contextPath }/back/page_config/table_save.do', $.extend({
                rawdml: rawdml,
                done: done
            }, formData.field), function (res) {
                lutil.success_msg(res.message);
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index);
            }, null, function (res) {
                layer.close(loding);
            });
            return false;
        });
    })
</script>
</body>
</html>
